Skip to main content

AR Clip SDK

Overview​

AR Clip lets you deliver App Clip–powered AR experiences that stream WebGL content while relying on ARKit and the WebAR³ VPS engine for localization. Follow the Immersal-style flow below: verify prerequisites, add the package, prepare the scene, enable VPS, and upload the WebGL build.

Prerequisites​

Testing note: In the Unity Editor most AR Clip APIs are wrapped with Application.isEditor. Build WebGL content and test it via the AR Clip mobile app for real tracking.

Install the Package​

  1. Open Window → Package Manager.
  2. Click + → Add package from Git URL….
  3. Paste https://github.com/WebAR-Studio/arclip_sdk.git and confirm.

Before importing, remove any legacy Assets/ARLib folder to avoid duplicate symbol errors such as:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Import samples​

From Package Manager → AR Clip → Samples:

  • Import WebGLTemplates and copy the resulting folder into Assets/ (root) so it appears under Project Settings → Player → WebGL Template.
  • Import TransparentBackground and move TransparentBackground.jslib to Assets/Plugins. This enables transparent rendering in WebGL.

Scene Setup​

  1. Add an empty GameObject named ARClipController.
  2. Attach ARLibController and assign a camera to the renderCamera field.
  3. Disable the Camera component on that GameObject, set Clear Flags = Solid Color, and use RGBA(0,0,0,0) for the background.
  4. Optional: Add ARLibTester (from Samples) in the Editor to simulate native callbacks.

Minimal bootstrap script​

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

Start VPS Localization​

Configure VPS after initialization and before starting localization:

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Listen to:

  • ARLibController.VPSInitialized to know when the subsystem is ready.
  • ARLibController.VPSPositionUpdated for localization poses.
  • ARLibController.OnVPSErrorHappened for error strings.

Timing helpers such as SetSendPhotoDelay, SetGpsAccuracyBarrier, and SetFirstRequestDelay allow tuning request cadence for specific locations.

Tracking Modules​

  • Register images with AddTrackingImage before enabling tracking. Wait for TrackedImagesArrayUpdate to confirm they loaded.
  • Call EnableSurfaceTracking("horizontal" | "vertical" | "both") to detect planes. Results are dispatched through SurfaceTrackingUpdated.

Build & Upload Workflow​

  1. Select WebGL template: Under Project Settings → Player → WebGL → Resolution and Presentation, choose the template you copied from the package.
  2. Build: Use File → Build Settings → WebGL → Build.
  3. Zip: Compress the build output so index.html resides at the zip root.
  4. Upload: Submit the archive via https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html.
  5. Test: Scan the generated QR code with the AR Clip iOS app (https://apps.apple.com/app/ar-clip/id6742754238).

Troubleshooting​

  • No camera feed in WebGL: ensure TransparentBackground.jslib lives in Assets/Plugins and the render camera is both assigned and disabled.
  • Editor play mode lacks AR events: this is expected. Use ARLibTester or build to WebGL for live data.
  • Duplicate symbol errors: confirm the legacy ARLib folder is removed before importing the package.